<template>
  <div>
    <div class="table">
      <div class="titlebox">
        <div class="text"></div>
        <div
          class="right"
          :style="{ alignItems: 'center', lineHeight: '32.5px' }"
        >
          <button
            type="primary"
            size="small"
            class="bewdao daochu"
            @click="oepnDialog"
          >
            新增
          </button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableList"
        style="width: 100%"
        height="350px"
        border
        id="exportTabyong"
        ref="table"
        :size="iissize"
        :header-cell-style="{
          background: '#f5f5f5',
          'text-align': 'center',
        }"
      >
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column align="left" prop="bizTableName" label="储存表名">
        </el-table-column>
        <el-table-column align="left" prop="bizModelCode" label="模型编码">
          <template slot-scope="scope">
            <el-input v-model="tableList[scope.$index].bizModelCode"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="bizModelName" label="模型名称">
          <template slot-scope="scope">
            <el-input v-model="tableList[scope.$index].bizModelName"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="readOnly" label="是否只读">
          <template slot-scope="scope">
            <el-select v-model="tableList[scope.$index].readOnly">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="flexible" label="是否开放查询">
          <template slot-scope="scope">
            <el-select v-model="tableList[scope.$index].flexible">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200" label="操作">
          <template slot-scope="scope">
            <div class="table-cz">
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
              <i
                style="font-size: 14px; color: red; cursor: pointer"
                class="el-icon-delete"
                @click="fieldDel(scope.row)"
              ></i></el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <DiaSubmit @diaClose="diaClose2" @save="save"></DiaSubmit>
    </div>
    <el-dialog
      :show-close="true"
      :visible.sync="tableVisible"
      v-if="tableVisible"
      width="800px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="diaClose"
      append-to-body
      :center="true"
    >
      <div class="top">
        <div class="left">
          <div class="search">
            <el-input
              placeholder="请输入关键字搜索"
              prefix-icon="el-icon-search"
              v-model="inputValue"
            >
            </el-input>
          </div>
        </div>
        <div class="towBtn">
          <button @click="chongzhi" class="button">重置</button>
          <button @click="chaxun" class="button chaxun">查询</button>
        </div>
      </div>
      <TableUse
        v-loading="loading2"
        :data="TableUseList"
        border
        max-height="400px"
        ref="table"
        :header-cell-style="{
          background: '#f5f5f5',
          'text-align': 'center',
        }"
        :default="defaultList"
        :tableConfig="tableConfig"
        :name="'tableName'"
        @selection-change="chooseList"
      >
      </TableUse>
      <div style="margin-top: 20px; text-align: center">
        <span slot="footer" class="dialog-footer">
          <el-button @click="diaClose">取 消</el-button>
          <el-button type="primary" @click="tableSubmit">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DiaSubmit from '../components/DiaSubmit.vue'
import TableUse from './TableUse.vue'
import {
  addBusinessModelsApi,
  getUnmodeledTabelListApi
} from '@/api/Model-all/Model-business'
export default {
  name: 'RelationTable',
  components: {
    DiaSubmit,
    TableUse
  },
  props: {
    id: {
      default: null
    }
  },
  data () {
    return {
      options: [
        {
          label: '是',
          value: true
        },
        {
          label: '否',
          value: false
        }
      ],
      iissize: 'medium',
      loading: false,
      loading2: false,
      tableList: [],
      TableUseList: [],
      choose: [],
      form: {},
      tableConfig: [
        {
          align: 'left',
          prop: 'tableName',
          label: '储存表名'
        },
        {
          align: 'left',
          prop: 'tableComment',
          label: '表说明'
        }
      ],
      inputValue: '',
      tableVisible: false
    }
  },
  computed: {
    defaultList () {
      return this.tableList.map((i) => {
        return { tableName: i.bizTableName, tableComment: i.bizModelName }
      })
    }
  },
  created () {
    this.getTableUseList()
  },
  mounted () {},
  methods: {
    async getTableUseList () {
      this.loading2 = true
      const res = await getUnmodeledTabelListApi(this.id)
      console.log(res)
      this.deflist = res.data.list
      this.TableUseList = res.data.list
      console.log('this.TableUseList', this.TableUseList)
      this.loading2 = false
    },
    removeItem (item) {
      console.log(this.tableList)
      const index = this.tableList.findIndex(
        (i) => i.bizTableName == item.bizTableName
      )
      if (index !== -1) {
        this.tableList.splice(index, 1)
      }
    },
    // 新增字段表删除
    fieldDel (item) {
      this.removeItem(item)
    },
    // async del (item) {
    //   this.$confirm('请确认是否删除该类关系?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(async () => {
    //       const res = await delRelationApi({ relationId: item.relationId })
    //       console.log(res)
    //       if (res.code == 200) {
    //         this.$message({
    //           type: 'success',
    //           message: res.message,
    //           duration: 2000
    //         })
    //         this.getRelationList()
    //       } else {
    //         this.$message({
    //           type: 'error',
    //           message: res.message,
    //           duration: 2000
    //         })
    //       }
    //     })
    //     .catch((action) => {
    //       if (action === 'cancel') {
    //         this.$message({
    //           type: 'info',
    //           message: '已取消删除',
    //           duration: 2000
    //         })
    //       }
    //     })
    // },
    async oepnDialog (index) {
      this.tableVisible = true
    },

    diaClose () {
      this.tableVisible = false
    },
    diaClose2 () {
      this.$emit('diaClose')
    },
    chongzhi () {
      this.inputValue = ''
      this.getTableUseList()
    },
    async chaxun () {
      await this.getTableUseList()
      const list = [...this.deflist]
      console.log(list)
      if (this.inputValue) {
        this.TableUseList = list.filter(
          (item) =>
            item.tableComment.includes(this.inputValue) ||
            item.tableName.includes(this.inputValue)
        )
      } else {
        this.TableUseList = [...list]
      }
    },
    shuaxin () {
      this.getRelationList()
      this.$message({
        type: 'success',
        message: '列表刷新成功',
        duration: 2000
      })
    },
    async tableSubmit () {
      console.log(this.TableUseList)
      const list = this.choose.split(',')
      console.log('list', list)
      this.getList(list)
      this.diaClose()
      console.log(this.tableList)
    },
    async save () {
      console.log(this.tableList)
      const res = await addBusinessModelsApi(this.id, this.tableList)
      console.log(res)
      if (res.code == '200') {
        this.$message({
          type: 'success',
          message: res.message,
          duration: 2000
        })
        this.$emit('shuaxin')
        this.diaClose2()
      } else {
        this.$message({
          type: 'error',
          message: res.message,
          duration: 2000
        })
      }
    },
    // 过滤新增列表
    getList (list) {
      const newArr = []
      list.forEach((tableName) => {
        newArr.push(this.TableUseList.find((i) => i.tableName == tableName))
      })
      this.tableList = newArr.map((i) => {
        return {
          bizModelCode: '',
          bizModelName: i.tableComment,
          bizTableName: i.tableName,
          flexible: true,
          readOnly: false
        }
      })
    },
    chooseList (arr) {
      console.log(arr)
      this.choose = arr
      console.log(this.choose)
    }
  }
}
</script>

<style lang="scss" scoped>
:v-deep.el-table th.gutter{
  display: none;
  width:0
}
::v-deep.el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}
::v-deep.el-table__body{
  width: 100% !important;
}
.button {
  width: 63px;
  height: 32px;
  margin-right: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.chaxun {
  background-color: #1890ff;
  color: #fff;
}
.top {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 20px;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    .group-select {
      width: 200px;
      margin-right: 10px;
    }
    .group-add {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: 1px solid #dcdfe6;
      border-radius: 5px;
      width: 25px;
      height: 25px;
      margin-right: 20px;
    }
    .search {
      display: flex;
      align-items: center;
      width: 200px;
    }
  }
}
.table {
  .titlebox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .text {
      font-size: 16px;
    }
    .right {
      align-items: center;

      .bewdao {
        padding: 0 10px;
        height: 32px;
      }
      .daochu {
        margin-right: 20px;
        background-color: #1890ff;
        color: #fff;
        border: none;
        border-radius: 3px;
      }
    }
  }
}
</style>
